<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row>
				<el-alert type="warning" title="路由配置是非常专业的事情，不建议非工程师操作。" />
			</el-row>
			<el-row>
				<Vue3JsonEditor v-model="json" :show-btns="false" @json-change="onJsonChange" style="width: 100%" />
			</el-row>
			<el-row>
				<el-button icon="folder-add" type="primary" class="ml10" @click="saveOrUpdate()" v-auth="'sys_route_update'">
					{{ $t('common.editBtn') }}
				</el-button>
			</el-row>
		</div>
	</div>
</template>
<script setup lang="ts" name="RouteList">
import { Vue3JsonEditor } from 'vue3-json-editor';
import { findAll, update } from '/@/api/admin/route';
import { useMessage } from '/@/hooks/message';

let json = ref({});
onMounted(() => {
	loadData();
});

function onJsonChange(value) {
	json.value = value;
}
function saveOrUpdate() {
	update(json.value).then(() => {
		useMessage().success('更新路由成功');
		findAll();
	});
}
function loadData() {
	findAll().then((res) => {
		const result = res.data;
		for (let i = 0; i < result.length; i++) {
			const route = result[i];
			if (route.predicates) {
				const predicates = route.predicates;
				route.predicates = JSON.parse(predicates);
			}
			if (route.filters) {
				const filters = route.filters;
				route.filters = JSON.parse(filters);
			}
		}
		json.value = result;
	});
}
</script>
